<template>
  <div>
    <h2>Article Title</h2>
    <a-list item-layout="vertical" size="large" :data-source="list">
      <a-list-item slot="renderItem" key="item.id" slot-scope="item">
        <template v-if="!loading">
          <span slot="actions">
            {{ item.author }}
          </span>
          <span slot="actions">
            {{ item.rate }}
          </span>
          <span slot="actions">
            {{ item.publish }}
          </span>
        </template>
        <a-skeleton :avatar="false" :loading="loading">
          <a-list-item-meta>
            <NuxtLink slot="title" :to="'/blog/' + item.id">{{
              item.title
            }}</NuxtLink>
          </a-list-item-meta>
          {{ item.summary }}
        </a-skeleton>
      </a-list-item>
    </a-list>
    <a href="?page=2">next</a>
    <NuxtLink to="?page=2">Page2</NuxtLink>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  layout: 'blog',
  fetch() {
    // fetch传参 { store, $content } 导致 this 丢失
    // 不传参可以使用 this
    this.$log(this.$route.query)
    this.$content('articles')
      .only(['id', 'title', 'author', 'publish', 'rate', 'summary'])
      .fetch()
      .then((obj) => {
        this.$store.commit('blog/SET_ARTICLES', obj)
        this.loading = false
        this.$log(this.list)
      })
  },
  // seems not work
  // watchQuery: ['page', 'limit'],
  data: () => {
    return {
      loading: true,
      loadingComments: true,
    }
  },
  computed: {
    ...mapState('blog', {
      list: 'articles',
    }),
    ...mapGetters('blog', {
      listCount: 'articleCount',
    }),
  },
  mounted() {
    // this.getList().then(() => {
    //   this.loading = false
    // })
  },
  methods: {
    ...mapActions('blog', {
      getList: 'getArticles',
    }),
  },
}
</script>
